<template>
  <div class="header">
    <div class="cut">
      <div @click="go(-1)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fanhui"></use>
        </svg>
      </div>
      <div @click="go(1)">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-gengduo"></use>
        </svg>
      </div>
    </div>
    <div class="search">
      <input type="text" placeholder="有什么喜欢听的歌吗"/>
    </div>
    <div class="news">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiaoxi"></use>
      </svg>
    </div>
    <div class="vip">
      <span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-f-vip"></use>
        </svg>
      </span>
      <span><label>&nbsp;&nbsp;开通会员享受更多权益</label></span>
    </div>
  </div>
</template>

<script>
import {ref} from "vue";
import {useRouter} from "vue-router";

export default {
  name: 'Header',
  description: {
    // 头部
  },
  setup() {
    let isTheme = ref(false);
    let router = useRouter();

    function go(page) {
      page === -1 ? router.back() : "";
      page === 1 ? router.go(1) : "";

    }

    function changeTheme() {
      this.isTheme = !this.isTheme
      console.log(document.documentElement.style)
      document.documentElement.style.setProperty('--theme-foreground-color', this.isTheme ? 'blue' : 'yellow')
      document.documentElement.style.setProperty('--theme-background-color', this.isTheme ? 'pink' : 'green')
    }

    return {
      isTheme,
      changeTheme,
      go

    }
  }
}
</script>

<style scoped lang="less">
@import url("~@/assets/less/1.less");

.header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 980px;

  .cut {
    width: 100px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    div {
      .icon1();

      svg {
        .icon-min(24px, @ffc);
      }
    }
  }

  .search {
    margin-left: 40px;

    input[type=text] {
      padding-left: 40px;
      /*width: 100%;
      height: 100%;*/
      width: 474px;
      height: 42px;
      color: @ffc;
      background-color: @fc;
      background-image: url('./images/search.png');
      background-position: 10px 10px;
      background-repeat: no-repeat;
      border-radius: 21px;
      border: none;
      font-size: 12px;
    }
  }

  .news {
    margin-left: 30px;
    .icon1();

    svg {
      .icon-min(24px, @ffc);
    }
  }

  .vip {
    margin-left: 15px;
    width: 212px;
    height: 42px;
    background-color: @fc;
    border-radius: 21px;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      color: @ffc;
      font-size: 12px;

      svg {
        .icon-min(22px, #e3923f);
      }
    }
  }
}
</style>
